<template>
  <el-dialog :title="title" :visible.sync="open" width="350px">
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      size="small"
      label-width="80px"
    >
      <el-form-item prop="userName" label="用户名称">
        <el-input v-model="formData.userName" placeholder="用户名称"></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="手机号码">
        <el-input v-model="formData.mobile" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item prop="pwd" label="用户密码">
        <el-input
          v-model="formData.pwd"
          show-password
          placeholder="用户密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="roleId" label="角色列表">
        <el-select v-model="formData.roleId" placeholder="请选择">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="onSubmit('formData')"
        size="small"
        :loading="loading"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { queryRoles } from "@/api/userManagement/roles";
import { addAndUpdateManager } from "@/api/userManagement/user";
import { checkPhoneNumber } from "@/utils/validate";
import md5 from "js-md5";
export default {
  data() {
    return {
      open: false,
      loading: false,
      title: "",
      roleList: [],
      formData: {
        mobile: "",
        pwd: "",
        roleId: "",
        userName: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        mobile: [
          {
            required: true,
            validator: checkPhoneNumber,
            trigger: "blur",
          },
        ],
        pwd: [{ required: true, message: "请输入用户密码", trigger: "blur" }],
        roleId: [
          { required: true, message: "请输选择角色", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    show(row) {
      this.open = true;
      if (row) {
        this.title = "编辑用户";
        this.formData = {
          mobile: row.mobile,
          roleId: row.roleId,
          pwd: row.pwd,
          userName: row.userName,
          id: row.id,
        };
      } else {
        this.formData = {
          mobile: "",
          pwd: "",
          roleId: "",
          userName: "",
        };
        this.title = "新增用户";
      }
      queryRoles({}).then((res) => {
        this.roleList = res.data.resultData;
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          var formData = {
            ...this.formData
          };
          formData.pwd = md5(formData.pwd);
          addAndUpdateManager(formData).then((res) => {
            this.loading = false;
            if (res.data.resultStatus) {
              this.open = false;
              this.$message.success(res.data.errorMessage);
              this.$emit("load");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>